{include file="public/header"}
<body>
<div id="app" v-cloak>
    <div class="ht-main">
        <div class="ht-tool">
            <div class="ht-tool-left">
                <el-button icon="el-icon-back" size="small" @click="goBack">返回</el-button>
    
                <el-button type="primary" size="small"  icon="el-icon-plus" @click="submit">提交</el-button>
            </div>
            <div class="ht-tool-right">
            </div>
        </div>
        <div class="ht-main-body" style="padding-top: 10px">
            <el-tree
                    :data="allData"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    :check-strictly="true"
                    :highlight-current="true"
                    :default-checked-keys="checkData"
                    default-expand-all>
            </el-tree>
        </div>
    </div>
</div>
{include file="public/common"}
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                id:"{$id}",
                allData:[],
                checkData:[]
            }
        },
        created: function () {
            this.getData()
        },
        methods: {
            submit: function () {
                var that = this
                $.post('{:url("Auth/groupAddRule")}', {group_id:that.id,rules:that.$refs.tree.getCheckedKeys()}, function (res) {
                    if (res.code == 1) {
                        that.showSuccessMsgCall(function () {
                            location.href="{:url('authGroupList')}";
                        })
                    } else {
                        that.showErrorMsg(that, res.msg)
                    }
                })
            },
            onSubmit() {
                var that = this
                $.post('{:url("Auth/authGroupAdd")}', that.editData, function (res) {
                    if (res.code == 1) {
                        that.showSuccessMsgCall(function () {
                            location.reload();
                        })
                    } else {
                        that.showErrorMsg(that, res.msg)
                    }
                })

            },
            getData: function () {
                var that = this
                axios.post('{:url("Auth/groupRuleList")}?id=' + that.id, {
                }).then((res) => {
                    console.log(res.data)
                    that.allData = res.data.data.data
                    that.checkData = res.data.data.checkData
                })
            },
            doAdd: function () {
                this.is_edit = true
                this.content = '添加'
                this.editData = this.editDataTemp
            },
            edit: function (data) {
                this.is_edit = true
                this.content = '编辑'
                this.editData = data
                console.log(data)
            },
            goBack: function () {
                location.href = "{:url('Auth/authGroupList')}"
            },
            del: function (data) {
                var that = this
                that.$confirm('确定删除么?', '提示', {
                    type: 'warning',
                    lockScroll: false
                }).then(() => {
                    axios.post('{:url("Auth/authGroupDel")}', {id: data.id}).then((res) => {
                        let result = res.data;
                        if (result.code === 1) {
                            that.showSuccessMsgCall(function () {
                                location.reload()
                            })
                        } else {
                            that.showErrorMsg(result.msg)
                        }
                    })
                })
            },
            handleSizeChange: function (e) {
                this.limit = e
            },
            handleCurrentChange: function (e) {
                this.page = e
            }
        },
        watch: {
            page(v) {
                this.getData()
            },
            limit() {
                this.getData()
            }
        }
    })
</script>
</body>
</html>
